<template>
    <div class="blog__header">
        <h2>Everything you need to know about development</h2>
        <nuxt-link to="/blogs" class="trk-btn trk-btn--border trk-btn--secondary2">View More <span><i
                    class="fa-solid fa-arrow-right"></i></span></nuxt-link>
    </div>
    <div class="blog__wrapper">
        <div class="row  g-4">
            <template v-for="(item, idx) in posts.slice(0, 5)" :key="idx">
                <div v-if="idx === 0" class="col-xl-8 col-lg-12">
                <div class="blog__large brand1-bg-2">
                    <div class="blog__large-thumb">
                        <img :src="item.thumbnail" alt="blog-image">
                    </div>
                    <div class="blog__large-content">
                        <a href="#"><span><i class="fa-solid fa-calendar-days me-2"></i></span>{{ item.date }}</a>
                        <h5><nuxt-link to="/blog-details">{{ item.title }}</nuxt-link></h5>
                        <p> {{ item.short_description }}
                        </p>
                        <div class="blog__author">
                            <div class="blog__author-thumb">
                                <img :src="item.author.avatar" alt="author">
                            </div>
                            <div class="blog__author-designation">
                                <h6>{{ item.author.name }}</h6>
                                <span>{{ item.author.role}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="col-xl-4 col-md-6">
                <div class="blog__item">
                    <div class="blog__item-inner">
                        <div class="blog__thumb">
                            <img :src="item.thumbnail" alt="blog Images">
                        </div>
                        <div class="blog__content">
                            <h5> <nuxt-link to="/blog-details"> {{ item.title }}</nuxt-link> </h5>
                            <div class="blog__writer">
                                <img :src="item.author.avatar" alt="author">
                                <div class="blog__writer-designation">
                                    <p>{{ item.author.name }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            </template>
            
            
        </div>
    </div>
</template>

<script>
export default {
    props: {
        posts: {
            type: Array,
            default: () => [],
        },
    },
}
</script>